<template>
    <div class="table">
        <!--主体-->
        <div class="container">
            <i class="el-icon-refresh" style="font-size: 18px;padding-bottom: 20px" @click="update"></i>
            <!--搜索-->
            <div class="handle-box">
                <el-input-number v-model="num1" controls-position="right" :min="1"></el-input-number>
                <span style="padding: 0 10px">-</span>
                <el-input-number v-model="num2" controls-position="right" :min="1"></el-input-number>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
                <span style="color: red;padding: 0 20px;font-weight: bold;font-size: 15px">范围建议在50以内</span>
            </div>
            <!--表格-->
            <el-table :data="tableData" border style="width: 100%" :header-cell-style="{'text-align':'center'}">
                <el-table-column label="ID" prop="label"  width="120" align="center">
                    <template scope="scope">
                        <span>{{scope.row.label.id}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="内容">
                    <template scope="scope">
                        <span>{{scope.row.label.context}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="关键词" prop="kwords" width="150">
                    <template scope="scope">
                        <span v-for="a in scope.row.kwords">{{a}},</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="status" width="60">
                    <template scope="scope">
                        <span v-if="scope.row.status== 0">未标注</span>
                        <span v-if="scope.row.status== 1" style="color: red">已标注</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">标注</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 标注弹出框 -->
        <el-dialog title="标注" :visible.sync="editVisible" width="40%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="ID">
                    <el-input v-model="form.id" disabled ></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input
                        type="textarea"
                        :rows="4"
                        disabled
                        v-model="form.label.context">
                    </el-input>
                </el-form-item>
                <el-form-item label="标注话题">
                    <el-tree
                        :data="data"
                        show-checkbox
                        node-key="id"
                        ref="tree"
                        :default-checked-keys="default_checked"
                        :props="defaultProps">
                    </el-tree>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                /*搜索*/
                num1: '1',
                num2: '10',
                searchUrl: 'http://bigdata-api.huimeimt.cn/resource_server/tiebamdm/select_biaozhu',
                /*token*/
                access_token: '',
                /*数据*/
                tableData: [],
                form: {
                    author: '',
                    good: '',
                    id: '',
                    kwords: [],
                    label:{
                        context:'',
                        id:'',
                    },
                    reply:[],
                    reply_num: '',
                    source: '',
                    status: '',
                    title: '',
                    total: '',
                    index_num: '',
                },
                /*标注*/
                editVisible: false,
                delVisible: false,
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                default_checked:[],
                data: [
                    {
                        "children": [{"id": 1, "label":"症状描述"},
                            {"id": 2, "label":"透析话题"},
                            {"id": 3, "label":"就诊医院选择"},
                            {"id": 4, "label":"医生选择"},
                            {"id": 5, "label":"经济求助"},
                            {"id": 6, "label":"配型检查"},
                            {"id": 7, "label":"移植流程"},
                            {"id": 8, "label":"等待肾源"},
                            {"id": 9, "label":"价格咨询"},
                            {"id": 10, "label":"移植方案选择"},
                            {"id": 11, "label":"移植适合度讨论"},
                            {"id": 12, "label":"认知期药品话题"}],
                        "id": 999,
                        "label": "认知考虑期"
                    },
                    {
                        "children": [
                            {
                                "children": [
                                    {
                                        "children": [
                                            {"id": 13, "label":"病史描述"},
                                            {"id": 14, "label":"术前影像学检查"},
                                            {"id": 15, "label":"术前血液检查"},
                                            {"id": 16, "label":"术前尿液检查"},
                                            {"id": 17, "label":"术前常规检查"},
                                            {"id": 18, "label":"术前肝肾功能检查"},
                                            {"id": 19, "label":"术前免疫组学检查"},
                                            {"id": 20, "label":"术前病理学检查"}
                                        ],
                                        "id": 994,
                                        "label": "术前检查"
                                    }
                                ],
                                "id": 996,
                                "label": "术前准备"
                            },
                            {
                                "children": [{"id": 21, "label":"麻醉"},
                                    {"id": 22, "label":"手术风险评估"},
                                    {"id": 23, "label":"术中药品"}],
                                "id": 9955,
                                "label": "术中"
                            }
                        ],
                        "id": 998,
                        "label": "围手术期"
                    },
                    {
                        "children": [
                            {
                                "children": [
                                    {
                                        "children": [{"id": 24, "label":"术后影像学检查"},
                                            {"id": 25, "label":"术后血液检查"},
                                            {"id": 26, "label":"术后尿液检查"},
                                            {"id": 27, "label":"术后常规检查"},
                                            {"id": 28, "label":"术后肝肾功能检查"},
                                            {"id": 29, "label":"术后免疫抑制剂血药浓度检查"},
                                            {"id": 30, "label":"术后组织学检查"},
                                            {"id": 31, "label":"术后病理学检查"},
                                            {"id": 32, "label":"术后肿瘤筛查"},
                                            {"id": 33, "label":"术后心血管筛查"},
                                            {"id": 34, "label":"术后其他疾病筛查"}],
                                        "id": 9995,
                                        "label": "检查"
                                    }
                                ],
                                "id": 9925,
                                "label": "随访与复查"
                            },
                            {
                                "children": [
                                    {
                                        "children": [{"id": 35, "label":"药效"},
                                            {"id": 36, "label":"经济性"},
                                            {"id": 37, "label":"安全性"},
                                            {"id": 38, "label":"副作用"},
                                            {"id": 39, "label":"适应症"},
                                            {"id": 40, "label":"禁忌症"},
                                            {"id": 41, "label":"依从性"},
                                            {"id": 42, "label":"药物相互作用"},
                                            {"id": 43, "label":"药品选择"},
                                            {"id": 44, "label":"药品买卖"},
                                            {"id": 45, "label":"购药途径"},
                                            {"id": 46, "label":"国外仿制药"}],
                                        "id": 9965,
                                        "label": "术后药品"
                                    }
                                ],
                                "id": 91095,
                                "label": "术后用药"
                            },
                            {
                                "children": [
                                    {
                                        "children": [{"id": 47, "label":"排斥反应"},
                                            {"id": 48, "label":"代谢性疾病"},
                                            {"id": 49, "label":"抗感染"},
                                            {"id": 50, "label":"心血管并发症"},
                                            {"id": 51, "label":"高尿酸血症"},
                                            {"id": 52, "label":"肾功能障碍"},
                                            {"id": 53, "label":"新发肿瘤"},
                                            {"id": 54, "label":"其他并发症"}],
                                        "id": 1995,
                                        "label": "并发症类型"
                                    },
                                    {
                                        "children": [
                                            {"id": 55, "label":"药效"},
                                            {"id": 56, "label":"经济性"},
                                            {"id": 57, "label":"安全性"},
                                            {"id": 58, "label":"副作用"},
                                            {"id": 59, "label":"适应症"},
                                            {"id": 60, "label":"禁忌症"},
                                            {"id": 61, "label":"依从性"},
                                            {"id": 62, "label":"药物相互作用"},
                                            {"id": 63, "label":"药品买卖"},
                                            {"id": 64, "label":"国外仿制药"}],
                                        "id": 995,
                                        "label": "并发症药品"
                                    }
                                ],
                                "id": 9961,
                                "label": "并发症"
                            },
                            {
                                "children": [{"id": 65, "label":"疾病复发"},
                                    {"id": 66, "label":"降低复发率"}],
                                "id": 99,
                                "label": "复发"
                            },
                            {
                                "children": [
                                    {
                                        "children": [{"id": 67, "label":"饮食禁忌"},
                                            {"id": 68, "label":"饮食建议"}],
                                        "id": 99511,
                                        "label": "饮食"
                                    },
                                    {
                                        "children": [{"id": 69, "label":"运动禁忌"},
                                            {"id": 70, "label":"运动建议"}],
                                        "id": 995111,
                                        "label": "运动"
                                    },
                                    {"id": 71, "label":"情感"},
                                    {"id": 72, "label":"性生活"},
                                    {"id": 73, "label":"生育"},
                                    {"id": 74, "label":"工作"}
                                ],
                                "id": 9951111,
                                "label": "生活管理"
                            }
                        ],
                        "id": 9971,
                        "label": "移植手术后"
                    }
                ],
            }
        },
        created() {
            this.gainTtoken();
        },
        methods: {
            gainTtoken() {
                this.$axios({
                    method: 'GET',
                    url: 'http://bigdata-oauth.huimeimt.cn/Dataplatform/token',
                }).then((res) => {
                    this.access_token = res.data.access_token
                })
            },
            search() {
                this.get()
            },
            handleEdit(index, row) {
                this.idx = index;
                const item = this.tableData[index];
                this.form = {
                    status:item.status,
                    good:item.good,
                    kwords:item.kwords,
                    title:item.title,
                    author:item.author,
                    reply_num:item.reply_num,
                    label:{
                        context:item.label.context,
                        id:item.label.id,
                    },
                    source:item.source,
                    reply:item.reply,
                    id:item.id,
                    index_num:item.index_num,
                };
                this.editVisible = true;
            },

            saveEdit() {
                this.form.kwords = this.$refs.tree.getCheckedKeys();
                this.form.kwords = this.form.kwords.join(',').split(',');
                if (this.form.kwords.length > 0) {
                    this.form.status = "1";
                    this.post()
                } else {
                    this.form.status = "0";
                    this.post()
                }
            },
            post() {
                this.$axios({
                    method: 'POST',
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    data: JSON.stringify(this.form),
                    url: "http://bigdata-api.huimeimt.cn/resource_server/tiebamdm/update_biaozhu" + "?access_token=" + this.access_token,
                }).then((res) => {
                    if(res.data.result != ""){
                        this.editVisible = false;
                        this.$message.success(`标注成功`);
                        this.$refs.tree.setCheckedKeys([]);
                        setTimeout(()=>{
                            this.get();
                        }, 1000);
/*                        this.get();
                        this.get();*/
                    }
                })
            },
            get(){
                this.$axios({
                    method: 'GET',
                    url: this.searchUrl + "?start=" + this.num1 + "&end=" + this.num2 + "&access_token=" + this.access_token,
                }).then((res) => {
                    this.tableData = res.data.result;
                })
            },
            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
            },
            deleteRow() {

            },
            /*刷新*/
            update() {
                location.reload();
            },
        },
    }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    /*分页开始*/
    .page-bar {
        margin: 40px;
    }
    ul, li {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none
    }
    .page-bar li:first-child > a {
        margin-left: 0
    }

    .page-bar a {
        border: 1px solid #ddd;
        text-decoration: none;
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        cursor: pointer
    }

    .page-bar a:hover {
        background-color: #eee;
    }

    .page-bar a.banclick {
        cursor: not-allowed;
    }

    .page-bar .active a {
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }

    .page-bar i {
        font-style: normal;
        color: #d44950;
        margin: 0 4px;
        font-size: 12px;
    }

    /*分页结束*/
</style>
